<%--
  Created by IntelliJ IDEA.
  User: 陈滨进
  Date: 2021/3/10
  Time: 0:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>网上商城会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css">
    <%--<link href="static/css/bootstrap.min.css" rel="stylesheet" />--%>
    <script src="static/js/jquery-1.11.3.min.js"></script>
    <%--<script src="static/js/bootstrap.js"></script>--%>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
    <script type="text/javascript">

        /**
         * 1、获取指定id的值
         * @param objId
         * @returns {*}
         */
        function val(objId) {
            return document.getElementById(objId).value;
        }
        //2.1显示错误信息
        function showTip(errObjId,text) {
            var showObj =document.getElementById(errObjId);
            showObj.innerHTML=text;
            showObj.style.display="block";

        }
        //隐藏错误提示
        function hideTip(errObjId) {
            var showObj = document.getElementById(errObjId);
            showObj.innerHTML="";
            showObj.style.display="none";

        }
        //获得焦点
        function focus(objId){
            //指定标签获得焦点
            document.getElementById(objId).focus();
        }

        //innerHTML：两个HTML元素内部的文本
        /**
         * onsubmit:提交按钮被点击
         * onblur 元素失去焦点
         * onfocus 元素获得焦点
         */
        function checkName() {
            var focusObjId;//记录需要获得焦点标签的id值
            // 1、验证用户名：必须由字母，数字下划线组成，并且长度为5到12 位
            // var  loginName =document.getElementById("username").value;
            var loginName = val("username");
            if (!/^[A-Za-z0-9_]{5,12}$/.test(loginName) ){
                //用户名输入不正确
                // alert("用户名输入不正确");
                showTip("usernameTip", "必须由字母，数字下划线组成，并且长度为5到12 位");
                // document.getElementById("username").focus();
                focusObjId = "username";
                // return false;
            }else{
                hideTip("usernameTip");
            }
            //如果有需要获得焦点 表示校验没有通过
            // if(focusObjId){
            //     focus(focusObjId);
            //     return false;
            // }
            // return true;
        }

        function checkpwd(){
            // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
            // var loinPassword = document.getElementById("password").value;
            var loginpwd = val("password");
            if (!/^[A-Za-z0-9_]{5,12}$/.test(loginpwd)){
                showTip("passwordTip","密码：必须由字母，数字下划线组成，并且长度为5到12位");
                // document.getElementById("password").focus();
                focusObjId = "password";
                // return false;
            }else{
                hideTip("passwordTip")
            }
        }

        function checkRepwd() {
            // 2、验证确认密码：和密码相同
            // var reloginpwd =document.getElementById("repwd").value;
            var reloginpwd = val("repwd")
            var loginpwd = val("password");
            if (!reloginpwd ) {
                showTip("repwdTip","确认密码不能为空!");
                // return false
                focusObjId = "repwd";

            }else {
                hideTip("repwdTip")
            }
            if (reloginpwd !=loginpwd) {
                showTip("repwdTip", "两次密码不一致");
                focusObjId = "repwd";
                // return false;
            }else {
                hideTip("repwdTip");
            }
        }
        function checkeMail(){
            // 邮箱验证：xxxxx@xxx.com
            // var email = document.getElementById("email").value;
            var emails = val("email");
            if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(emails)){
                //邮箱格式不正确
                showTip("emailTip","邮箱格式不正确");
                focusObjId="email";
                // document.getElementById("email").focus();//让鼠标焦点聚集到房前选中的标签上
                // return false;
            }else{
                hideTip("emailTip")
            }
        }
        // 验证码：现在只需要验证用户已输入。

        function changeImg() {
            $('#imgId').attr("src", "http://localhost:8080/shop/VerifyCode.do?" + new Date());

        }
        function char(){
            //验证码框
            var codeText = $("#code").val();
            codeText = $.trim(codeText);
            if (codeText == null || codeText == "") {
                // $('span.errorMsg').text("验证码不能为空");
                showTip("codeTip","验证码不能为空");
                return false;
            }else if (codeText=$("#imgId").val()) {

                hideTip("codeTip")
            }

        }
        //	点击注册
        $(function () {
            //给注册按钮绑定单击事件
            $("#sub_btn").click(function () {
                //1.获取用户名输入框里的内容


            });
        });





    </script>
</head>
<body>
<div id="login_header">
    <img class="logo_img" alt="" src="static/img/logo.gif">
</div>

<div class="login_banner">

    <div id="l_content">
        <span class="login_word">欢迎注册</span>
    </div>

    <div id="content">
        <div class="login_form">
            <div class="login_box">
                <div class="tit">
                    <h1>注册网上商城会员</h1>
                    <span class="errorMsg"></span>
                </div>
                <div class="form">
                    <form action="regist">
                        <br/><label>用户名称：</label>
                        <input onblur="checkName()" class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
                        <span><font id="usernameTip" color="red"></font> </span>
                        <br />
                        <br />
                        <label>用户密码：</label>
                        <input onblur="checkpwd()" class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
                        <span><font id="passwordTip" color="red"></font> </span>
                        <br />
                        <br />
                        <label>确认密码：</label>
                        <input onblur="checkRepwd()" class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
                        <span><font id="repwdTip" color="red"></font> </span>
                        <br />
                        <br />
                        <label>电子邮件：</label>
                        <input onblur="checkeMail()" class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
                        <span><font id="emailTip" color="red"></font> </span>
                        <br />
                        <br />
                        <label>验证码：</label>
                        <input onblur="char()" class="itxt" type="text" style="width: 150px;" id="code" />
                        <span><font id="codeTip" color="red"></font> </span>
                        <!--<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">-->
                        <img id="imgId" onclick="changeImg()" alt="" src="http://localhost:8080/shop/VerifyCode.do" style="float: right; margin-right: 40px">

                        <br />
                        <br />
                        <input onblur="char()" type="submit" value="注册" id="sub_btn" />
                        <span><font id="sub_btnTip" color="red"></font> </span>

                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<div id="bottom">
			<span>
				网上商城.Copyright &copy;2020
			</span>
</div>
</body>
</html>
